<template>
	<div class="progress-wrapper">
		<div class="progress-container">
			<div
				class="progress-bar"
				:style="{ width: `${(currentProgress / maxProgress) * 100}%` }"
			></div>
			<div class="progress-text"> {{ currentProgress }}/{{ maxProgress }} </div>
		</div>
	</div>
</template>

<script>
export default {
	name: "ProgressBarWithText",
	props: {
		currentProgress: {
			type: Number,
			required: true,
			validator: (value) => value >= 0 && value <= 20,
		},
		maxProgress: {
			type: Number,
			default: 20,
		},
	},
	watch: {
		currentProgress(newVal) {
			if (newVal < 0 || newVal > this.maxProgress) {
				console.warn(`Progress should be between 0 and ${this.maxProgress}`);
			}
		},
	},
};
</script>

<style scoped>
.progress-wrapper {
	width: 100%;
	margin: 10px 0;
}

.progress-container {
	width: 100%;
	height: 16px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	position: relative;
	overflow: hidden;
}

.progress-bar {
	height: 100%;
	background: linear-gradient(
		67deg,
		rgba(115, 0, 255, 0.8) 7%,
		rgba(135, 82, 243, 0.8) 30%,
		rgba(84, 151, 213, 0.8) 49%,
		rgba(67, 180, 202, 0.8) 60%,
		rgba(40, 224, 185, 0.8) 72%,
		rgba(25, 251, 155, 0.8) 97%
	);
	border-radius: 12px;
	transition: width 0.3s ease;
	position: absolute;
	top: 0;
	left: 0;
}

.progress-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	font-size: 12px;
	font-weight: bold;
	line-height: 33px;
	text-align: center;
	letter-spacing: normal;
	color: #ffffff;
}
</style>
